<template>
  <router-link :to="`/video/${videoId}`">
    <a-card class="video-card" style="width: 240px;" :loading="false" hoverable>
      <template #cover>
        <img :alt="title" style="height: 130px;overflow:hidden" :src="coverUrl" />
      </template>
      <div class="title">{{ title }}</div>
      <a-flex justify="space-between">
        <router-link :to="`/profile/${authorUserId}`">{{ authorNickname }}</router-link>
        <span style="color: #999;">{{ publishTime }}</span>
      </a-flex>
    </a-card>
  </router-link>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  videoId: {
    type: String
  },
  coverUrl: {
    type: String
  },
  title: {
    type: String
  },
  authorUserId: {
    type: String
  },
  authorNickname: {
    type: String
  },
  publishTime: {
    type: String
  }
});


</script>
<style>
.video-card.ant-card {
  overflow: hidden;
  >.ant-card-body {
    padding: 10px;
  }

  .title {
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal
  }

  img {
    object-fit: cover;
  }
}
</style>